﻿import React from 'react';
import { Upload, Icon, message, Spin, Table, Button } from 'antd';
import {connect} from 'react-redux'
import { hashHistory } from 'react-router'
import './index.css'
import * as Util from '../../services/Util'
import AuthManager from '../../services/auth'
import { uploadListQuery } from '../../actions'


/**
 * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接
 */
class CompanyImport extends React.Component {

  constructor(props){
    super(props);
  }

  componentWillMount () {
    this.props.dispatch(uploadListQuery.request()({type:'company'}));
  }

  componentWillUnmount () {
  }

  onReloadClick() {
    this.props.dispatch(uploadListQuery.request()({type:"company"}));
  }

  onUploadDetailClick(id) {
    hashHistory.push({ pathname: '/upload/detail', state: { id, id } });
  }

  render() {
    const updateConfig = {
      action:`//d.gaokaozyt.cn/student/upload.do?token=${AuthManager.getToken()}&type=company`,
      beforeUpload(file) {
        const isExcel = Util.endWith(file.name, ".xls")
        if (!isExcel) {
          message.error('只能上传Excel文件！');
        }
        return isExcel;
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 文件上传成功，可点击刷新查看后台处理状态！`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件上传失败！.`);
        }
      },
    };

    const uploadColumns = [
      {
        title: '编号',
        dataIndex: 'id',
        width: '10%',
      },
      {
        title: '文件名称',
        dataIndex: 'originalName',
        width: '25%',
      },
      {
        title: '上传时间',
        dataIndex: 'uploadTime',
        width: '15%',
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: '15%',
        render:(text, record) => {
          if (record.status == '全部成功') {
            return (<span><Icon style={{color: '#87d068'}} type='check-circle' />&nbsp;{record.status}</span>);
          } else if (record.status=='全部失败'){
            return (<span><Icon style={{color: '#f50'}} type="close-circle" />&nbsp;{record.status}</span>);
          } else {
            return (<span><Icon style={{color: '#fa0'}} type="info-circle" />&nbsp;{record.status}</span>);
          }

        } ,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: '25%',
      },
      {
        title: '操作',
        key: 'operation',
        render:(text, record) => (
          <Button onClick={this.onUploadDetailClick.bind(this, record.id)} >查看</Button>
        ),
        width: '10%'
      }
    ];

    let { uploads, loading=false } = this.props;

    return (
      <div style={{ marginTop: 16, minHeight: 560 }}>
        <Upload.Dragger {...updateConfig}>
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
          </p>
          <p className="ant-upload-text">点击或拖动到该区域进行文件上传</p>
          <p className="ant-upload-hint">只支持Excel2007以上版本，数据格式请点击<a href="aaaa">这里</a>进行模板下载！</p>
        </Upload.Dragger>
        <div style={{ marginTop: 24, marginBottom: 16 }} className="clearfix">
            <Button type="primary" icon="reload" loading={loading} onClick={this.onReloadClick.bind(this)}>刷新</Button>
        </div>
        <Spin spinning={loading}><Table columns={uploadColumns} dataSource={uploads} /></Spin>
      </div>
    );
  }

}

function mapStateToProps(state) {
  return {
    uploads: state.upload.uploads,
    loading: state.upload.loading,
  };
}

export default connect(mapStateToProps)(CompanyImport)
